<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>购物车</title>
		<link rel="stylesheet" href="http://shop.com:5500/resources/css/bootstrap.min.css" type="text/css" />
		<script src="http://shop.com:5500/resources/js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="http://shop.com:5500/resources/js/bootstrap.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/jquery-heima-0.0.1.js" ></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/heima-include.js" ></script>
		<script type="text/javascript" src="http://shop.com:5500/resources/js/vue.js" ></script>
	</head>

	<body>
		<div class="container-fluid"  >
			<!--头部-->
			<div id="header" style="min-height: 130px;"></div>	
			<div class="container" style="min-height: 441px;">
				<div class="row">
					<div style="margin:0 auto; margin-top:10px;width:950px;">
						<strong style="font-size:16px;margin:5px 0;">购物车详情</strong>
						<table class="table table-bordered">
							<tbody id="items">
								<tr class="warning">
									<th>图片</th>
									<th>商品</th>
									<th>价格</th>
									<th>数量</th>
									<th>小计</th>
									<th>操作</th>
								</tr>
								<!-- <tr class="active">
									<td width="60" width="40%">
										<input type="hidden" name="id" value="22">
										<img src="http://shop.com:5500/resources/products/1/donggua1.jpg" width="70" height="60">
									</td>
									<td width="30%">
										<a target="_blank"> 有机蔬菜      大冬瓜...</a>
									</td>
									<td width="20%">
										￥298.00
									</td>
									<td width="10%">
										2
									</td>
									<td width="15%">
										<span class="subtotal">￥596.00</span>
									</td>
									<td>
										<a href="javascript:;" class="delete">删除</a>
									</td>
								</tr> -->
							</tbody>
						</table>
					</div>
				</div>
	
				<div style="margin-right:130px;">
					<div style="text-align:right;">
						合计金额: <strong style="color:#ff6600;">￥<span id="total">0.00</span>元</strong>
					</div>
					<div style="text-align:right;margin-top:10px;margin-bottom:10px;">
						<a href="order_info.htm" id="clear" class="clear">清空购物车</a>
						<a href="order_info.htm">
							<input type="submit" width="100" value="提交订单" id="submit" border="0" style="background-color:#CD062D;height:35px;width:100px;color:white;">
						</a>
					</div>
				</div>
			</div>
			<!--尾部-->
			<div id="footer"  style="min-height: 203px;"></div>
		</div>
		<script>
			// 查询购物车中的全部信息
			$(function(){
				$.ajax({
					url:"http://api.shop.com:8080/cart?md=list",
					type:"post",
					success:function(response){
						alert(response);
						// js遍历对象 for in 
						// 遍历数组 for of
						//拼接标签
						// 字符串转对象
						var vo=eval("("+response+")");
						var cart = vo.data;
						var items = cart.items;

						var html="";
						for(key in items){
							var cartItem=items[key];
							html+="<tr class=\"active\">\n" +
										"\t\t\t\t\t\t\t\t\t<td width=\"60\" width=\"40%\">\n" +
										"\t\t\t\t\t\t\t\t\t\t<img src=\"http://shop.com:5500/"+cartItem.product.pimage+"\" width=\"70\" height=\"60\">\n" +
										"\t\t\t\t\t\t\t\t\t</td>\n" +
										"\t\t\t\t\t\t\t\t\t<td width=\"30%\">\n" +
										"\t\t\t\t\t\t\t\t\t\t<a target=\"_blank\"> "+cartItem.product.pname+"</a>\n" +
										"\t\t\t\t\t\t\t\t\t</td>\n" +
										"\t\t\t\t\t\t\t\t\t<td width=\"20%\">\n" +
										"\t\t\t\t\t\t\t\t\t\t￥"+cartItem.product.shop_price+"\n" +
										"\t\t\t\t\t\t\t\t\t</td>\n" +
										"\t\t\t\t\t\t\t\t\t<td width=\"10%\">\n" +
										"\t\t\t\t\t\t\t\t\t\t"+cartItem.count+"\n" +
										"\t\t\t\t\t\t\t\t\t</td>\n" +
										"\t\t\t\t\t\t\t\t\t<td width=\"15%\">\n" +
										"\t\t\t\t\t\t\t\t\t\t<span class=\"subtotal\">￥"+cartItem.subtotal+"</span>\n" +
										"\t\t\t\t\t\t\t\t\t</td>\n" +
										"\t\t\t\t\t\t\t\t\t<td>\n" +
										"\t\t\t\t\t\t\t\t\t\t<a pid="+cartItem.product.pid+" href=\"javascript:;\" class=\"delete\" onclick='removeItem(this)'>删除</a>\n" +
										"\t\t\t\t\t\t\t\t\t</td>\n" +
										"\t\t\t\t\t\t\t\t</tr>";
						}
						//html字符串 放在合适的位置
						$("#items").append(html);
						$("#total").html(cart.total);
					}
				})
			})
		</script>
	</body>
</html>